<template>
    
    <el-popover  placement="left" width="1000" trigger="hover" @show="onShow" @hide="onHide" :open-delay="300" class="ml10">
        <div :class="fclass">{{name}}({{code}})</div>
        <el-row>
            <el-col :span="2">
                板块信息:
            </el-col>
            <el-col :span="22">
                <span class="bkitem" v-for="(item,idx) in bkList" :key="idx" :class="getRateColor(item.rate)" :title="item.code">
                    <span class="bkname">
                    <popList :code="item.code" :showName="item.name" title="查询板块内排行" fixval="100"
                        @addToFav="addToFavStock"
                        :url="'http://push2.eastmoney.com/api/qt/clist/get?pi=0&pz=1000&po=1&ut=bd1d9ddb04089700cf9c27f6f7426281&fs=b:++code++&fid=f3&fields=f1,f2,f3,f12,f13,f14,f152&'"
                    ></popList>
                    :</span>
                    
                    <span class="bkrate">{{item.rate}}%</span>
                </span>
            </el-col>
        </el-row>
        <div style="min-height:400px;display:flex;flex-direction:row;flex-wrap:nowrap">     
            <!-- <img v-if="isShow" :src="realtimesrc" width="500" height="300"/>  -->
            <timeLine v-if="isShow" :code="code" :pre="pre" size="high"></timeLine>
            <kLineChr v-if="isShow" :code="code" :markList="this.markList" style="height: 300px"></kLineChr>
        </div>
        <span slot="reference" >
            <a target="_blank" :href="linksrc">
                <span class="fsize" :class="fclass">{{name}}</span>
            </a>
        </span>
    </el-popover>
</template>

<script>
import kLineChr from "../chart/kLineChr";
import timeLine from "@/components/chart/timeLine"
import popList from "../publist/popList"
export default {
    components:{
        kLineChr,
        timeLine,
        popList
    },
    props:["code","name","fclass","pre","markList"],
    data() {
        return {
            isShow :false,
            bkList : [],
        }
    },
    computed:{
        linksrc(){
            var code = this.code;
            var first = code.substring(0,1);
            if(code=="000001"){
                code= "sh"+code;
            }else if(first=="0" || first=="3" || first=="1"){
                code = "sz"+code;
            }else {
                code = "sh"+code;
            }
            return `http://quote.eastmoney.com/${code}.html`;
        },
        //
        realsrc(){
            var code = this.code;
            var first = code.substring(0,1);
            if(code=="000001"){
                code= "1."+code;
            }else if(first=="0" || first=="3" || first=="1"){
                code = "0."+code;
            }else {
                code = "1."+code;
            }
            return `http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${code}&imageType=KXL&`+Math.random();
        },
        realtimesrc(){
            var code = this.code;
            var first = code.substring(0,1);
            if(code=="000001"){
                code= "1."+code;
            }else if(first=="0" || first=="3" || first=="1"){
                code = "0."+code;
            }else {
                code = "1."+code;
            }
            return `http://webquotepic.eastmoney.com/GetPic.aspx?nid=${code}&imageType=r&`+Math.random();
            //webquotepic.eastmoney.com/GetPic.aspx?nid=0.300877&imageType=r&token=44c9d251add88e27b65ed86506f6e5da
        },

        realsrc2(){
            var code = this.code;
            var first = code.substring(0,1);
            if(code=="000001"){
                code= code+1;
            }else if(first=="0" || first=="3" || first=="1"){
                code = code+2;
            }else {
                code = code+1;
            }
            return `https://webquoteklinepic.eastmoney.com/GetPic.aspx?id=${code}&imageType=TADK`;
        }
    },
    inject: ['cfg',"isQry","getSleepTime","isMoneyException","addException"],
    mounted() {
    },

    methods: {
        addToFavStock(selitem){
            var list = this.cfg.favList;
            var tmplist = list.filter((item)=>{return item.c == selitem.f12})
            if(tmplist.length>0){
                this.$message.error("已存在");
                return;
            }
            var item = {
                "c":selitem.f12,"n":selitem.f14,"p":"","r":"","watch":false
                };
            list.push(item);
        },
        onShow(){
            if(this.isShow) return;
            this.getBkList()
            this.isShow=true;
        },
        onHide(){
            this.isShow=false;
        },
        getBkList(){
            this.bkList = []
            var code = this.code;
            var that = this;
            var first = code.substring(0,1);
            if(this.pre){
                code = this.pre+"."+code;
            }else if(first=="0" || first=="3" || first=="1"){
                code = "0."+code;
            }else {
                code = "1."+code;
            }
            this.$axios.get(`http://push2.eastmoney.com/api/qt/slist/get?ut=fa5fd1943c7b386f172d6893dbfba10b&spt=3&pi=0&pz=20&po=1&fields=f14,f3,f128,f12,f13,f100,f102,f103&secid=${code}&_=1607310326571`)
            .then((res) => {
                if (res.data.data) {
                    var data = res.data.data;
                    var total = data.total;
                    for(var i=0;i<total;i++){
                        var item = data.diff[i];
                        if(!item) continue;
                        this.bkList.push({name:item.f14,code:item.f12,rate:this.fixed(item.f3/100)});
                    }
                } else {
                    console.log("未查询到关联板块列表:"+code)
                    // this.$message.error(res.data.message);
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .bkitem{
        display: inline-block;
        .bkname{
            display: inline-block;
            width: 75px;
            min-width: 75px;
            text-align: right;
        }
        .bkrate{
            display: inline-block;
            width: 60px;
            min-width: 60px;
            text-align: right;
        }
    }

</style>


